出处：掘金

原作者：ErpanOmer

decoding

在现代 Web 开发中，性能优化和用户体验是成功的关键因素之一。HTML5 引入了一系列新的属性来提升开发者对资源加载的控制，其中 <img> 标签的 decoding 属性正是为了优化图像加载而设计的。本文将深入探讨 decoding 属性的原理、用途以及如何在实际场景中应用

什么是 decoding 属性？

decoding 是 HTML5 提供的一个可选属性，用于指定图像解码的策略，以便开发者更好地控制图像的加载和显示过程

该属性有三个取值：

• sync：同步解码。图像会在主线程上立即解码并渲染，优先级最高，但可能导致页面渲染阻塞
• async：异步解码。图像在后台线程解码，不会阻塞页面渲染，但可能导致图像加载稍有延迟
• auto：自动解码（默认值）。让浏览器根据当前环境和优化策略自行决定解码方式

示例代码：

<img src="example.jpg" decoding="async" alt="示例图像">

在上面的例子中，浏览器会在后台线程异步解码图像，从而减少主线程的负担

decoding 工作原理

在浏览器渲染过程中，图像解码是指将图像文件（如 JPEG 或 PNG）转换为位图的过程。默认情况下，浏览器会根据环境和优先级动态选择解码方式，而通过 decoding 属性，开发者可以显式地指定策略

同步解码（sync）

• 图像会在主线程上立即解码并显示
• 适合关键性高的图像，例如首屏展示的商品图片或重要的视觉内容
• 缺点是可能导致页面渲染阻塞，特别是在图像较大或网络较慢的情况下

异步解码（async）

• 图像在后台线程解码
• 避免了主线程的阻塞，从而提升页面的整体响应速度
• 适用于非关键图像，例如页面中的次要装饰图片

自动解码（auto）

• 交由浏览器根据当前场景和性能需求自行决定解码策略
• 适合大多数常规场景，特别是当开发者不确定最佳策略时

实际应用场景分析

首屏优化

在需要快速加载和显示的首屏场景，建议使用 decoding="sync"，这种方式确保用户能第一时间看到关键内容，但需要注意避免加载过大的图像以免引发卡顿

渐进式加载

对于次要或非关键图像，decoding="async" 是更合适的选择，例如懒加载场景。结合 loading="lazy" 属性，进一步优化性能，确保图像只在需要时加载和解码

自动化场景

在开发复杂页面或需要兼容多种设备时，使用 decoding="auto" 是最安全的选择。让浏览器根据实际情况自动优化

注意事项

1. 与其他属性的结合
   • decoding 属性常与 loading 属性配合使用，例如 loading="lazy" 提供延迟加载，而 decoding="async" 提供后台解码
   • 这种组合能显著提升页面性能，尤其是在内容繁多的场景下
2. 浏览器支持情况
   • 大多数现代浏览器（如 Chrome、Firefox、Edge）都已支持 decoding 属性，但需注意 Safari 的兼容性
   • 开发者可以通过 Can I Use 检查最新的兼容性信息
3. 性能权衡
   • 在选择解码策略时，需要权衡解码优先级和页面渲染性能
   • 对于性能敏感的页面，应优先测试不同策略对用户体验的影响

总结

HTML 5 的 decoding 属性为开发者提供了更细粒度的图像加载控制能力。在实际应用中，合理选择解码策略能够有效提升页面性能和用户体验。以下是一些最佳实践：

• 对关键图像使用 decoding="sync"，确保快速显示
• 对非关键图像使用 decoding="async"，减少主线程压力
• 在不确定场景时使用 decoding="auto"，让浏览器智能优化

通过深入理解和灵活应用 decoding 属性，开发者可以更好地优化图像加载流程，从而为用户提供更流畅的浏览体验

fetchPriority

随着 Web 性能优化的需求日益增加，浏览器在资源加载控制方面也不断进化。fetchPriority 是 <img> 标签中一个相对较新的属性，它让开发者能够显式控制图像资源的加载优先级，从而优化页面的性能和用户体验。本文将深入解析 fetchPriority 属性的作用、原理及其实际应用场景

什么是 fetchPriority 属性？

fetchPriority 属性用于为图像资源指定加载的优先级，它可以帮助浏览器在有限的网络带宽和资源下，更高效地加载关键内容。此属性的出现旨在弥补以往加载优先级仅由浏览器算法动态决定的不足，为开发者提供更大的控制权

fetchPriority 共有以下三个取值：

• high：高优先级。适用于首屏或其他关键图像，确保浏览器尽早加载
• low：低优先级。用于次要或装饰性图像，以减少对关键资源的竞争
• auto（默认值）：自动优先级，由浏览器根据上下文和优化策略自行决定

示例代码：

<img src="hero.jpg" fetchPriority="high" alt="关键视觉图">
<img src="background.jpg" fetchPriority="low" alt="装饰背景">

在上例中，hero.jpg 将优先加载，而 background.jpg 则延后加载以避免抢占带宽

fetchPriority 工作原理

在页面加载过程中，浏览器会根据 HTML 的结构、资源的依赖关系和网络带宽状况，动态调整资源加载的优先级。然而，这种方式可能无法满足某些特定场景的优化需求。例如：

• 首屏关键内容可能被次要资源抢占加载顺序
• 次要资源在低带宽下可能延误关键资源的加载

通过引入 fetchPriority 属性，开发者可以直接告诉浏览器哪些资源应优先加载，从而避免上述问题

使用场景分析

优化首屏加载

在需要快速显示的首屏关键内容中，fetchPriority="high" 是最佳选择。这种设置确保横幅图像尽早加载，从而提升首屏渲染速度，改善用户体验

延迟加载次要资源

对于不直接影响用户体验的图像，例如背景或装饰图像，可以使用 fetchPriority="low"。这有助于为关键资源腾出带宽，减少对重要内容加载的干扰

浏览器自动优化

在某些复杂场景中，让浏览器通过 fetchPriority="auto" 自行决定优先级可能更为适合。这种方式适合开发者不确定具体优先级的场景，浏览器将根据页面上下文动态调整加载顺序

注意事项

1. 与其他性能优化技术的结合
   • fetchPriority 属性通常与 loading="lazy" 一起使用，进一步提升性能。例如：<img src="image.jpg" fetchPriority="low" loading="lazy" alt="延迟加载图像">
   • 此组合尤其适用于长页面中的次要图像
2. 浏览器支持情况
   • 当前，fetchPriority 属性已被大多数现代浏览器支持，包括 Chrome 和 Edge
   • 在 Safari 或较老版本浏览器中可能不完全支持，建议在使用前参考 Can I Use 检查兼容性
3. 资源类型与优先级
   • 对于非图像资源（如脚本或样式表），加载优先级的调整需通过其他方式（如 rel="preload"）
   • 确保仅为真正需要调整优先级的图像使用 fetchPriority，避免滥用

总结与最佳实践

fetchPriority 属性是 HTML5 提供的一种精细化控制资源加载顺序的工具。通过合理设置优先级，开发者可以有效提升页面性能和用户体验

最佳实践：

1. 对首屏关键内容使用 fetchPriority="high"
2. 对非关键或装饰性内容使用 fetchPriority="low"
3. 在不确定场景时使用 fetchPriority="auto"，让浏览器自行优化
4. 与其他性能优化技术（如 loading="lazy" 和资源预加载）结合使用，最大化性能提升

通过充分理解和正确应用 fetchPriority，开发者可以为用户提供更快、更流畅的浏览体验